// 账号登录
// 密码状态 -loading
// 登录状态 -loading
import React, { useRef, useState } from 'react'
import { Alert, View } from 'react-native'
import { Button, CheckBox, Divider, Header, Input, Text, Tooltip } from 'react-native-elements'
import AntDesign from 'react-native-vector-icons/FontAwesome'
import { connect } from 'react-redux'
import { globalColor, pxPage, throttle, _defStyle, checkPhone, checkPassword, MygoBack, resetAction } from '../../../common/Common'
import styles from './Style'
import { Login_func, Login_func_qq } from '../../../redux/actions/Register+Login'
import { LtftDesign, ClearInput, Foot } from '../../../components/Components'

export let List = [
    {
        buttonStyle: {
            backgroundColor: globalColor.defaultBackgroundColor_Weixin
        },
        iconcolor: globalColor.defaultIconColor_Weixin,
        iconname: "weixin",
        press: (props) => {
            props.navigation.push('Weixin_Login')
        }
    },
    {
        buttonStyle: {
            backgroundColor: globalColor.defaultBackgroundColor_QQ
        },
        iconcolor: globalColor.defaultIconColor_QQ,
        iconname: "qq",
        press: (props) => {
            props.Login_func_qq();
            if (props.login.login && props.login.loading) props.navigation.navigate('Mine')
            else {
                Alert.alert(props.login.msg)
                props.navigation.navigate('Home');
            };
        }
    },
    {
        buttonStyle: {
            backgroundColor: globalColor.defaultBackgroundColor_Weibo
        },
        iconcolor: globalColor.defaultIconColor_Weibo,
        iconname: "weibo",
        press: (props) => {
            props.Login_func_qq();
        }
    },
    {
        buttonStyle: {
            backgroundColor: globalColor.defaultBackgroundColor_phone
        },
        iconcolor: globalColor.defaultIconColor_phone,
        iconname: "mobile-phone",
        press: (props) => {
            props.navigation.push('Login_phone')
        }
    },
]

const Login = (props) => {
    // 用户账号
    const [user, setUser] = useState('');
    // 密码
    const [_password, setPassword] = useState('');
    // 是否勾选协议
    const [check, setCheck] = useState(false);
    // 账号校验
    const [phone_right, setPhone_right] = useState(true);
    // 密码校验
    const [password_right, setPassword_right] = useState(true);
    const todoinput = useRef();
    const password = useRef();
    const tooltipRef = useRef(null);

    const { navigation } = props

    MygoBack(props)
    return (
        <View style={{ flex: 1 }}>
            <Header
                backgroundColor={globalColor.defaultColor}
                leftComponent={<LtftDesign props={props} />}
                centerComponent={null}
                rightComponent={
                    <Button
                        title="注册"
                        buttonStyle={{ backgroundColor: null }}
                        onPress={throttle(() => {
                            navigation.push('Register')
                        }, 2000)}
                    ></Button>
                }
                elevated={true}
            ></Header>
            <View style={styles.container}>
                <Text style={styles.messagelogin}>账号登录</Text>
                <Divider style={styles.Divider}></Divider>
                <View style={styles.view_input}>
                    <Input
                        ref={todoinput}
                        label="账号"
                        placeholder="输入手机号"
                        autoCompleteType={'email', 'tel'}
                        leftIcon={<AntDesign name="user" size={pxPage(22)}></AntDesign>}
                        rightIcon={<ClearInput todoinput={todoinput} context={user} func={setUser} />}
                        keyboardType={'phone-pad'}
                        maxLength={25}
                        onChangeText={value => {
                            setUser(value)
                        }}
                        errorMessage={
                            phone_right
                                ? null
                                : '手机号有误'
                        }
                    ></Input>
                    <Input
                        ref={password}
                        label="密码"
                        placeholder="输入密码"
                        autoCompleteType={'password'}
                        leftIcon={<AntDesign name="lock" size={pxPage(22)}></AntDesign>}
                        rightIcon={<ClearInput todoinput={password} context={_password} func={setPassword} />}
                        keyboardType={'visible-password'}
                        maxLength={25}
                        onChangeText={value => {
                            setPassword(value)
                        }}
                        errorMessage={
                            password_right
                                ? null
                                : '请输入密码'
                        }
                    ></Input>
                    <View style={styles.view_input_view}>
                        <Button
                            titleStyle={styles.titleStyle}
                            title="短信验证码登录"
                            type="clear"
                            onPress={throttle(() => {
                                navigation.push('Login_phone')
                            }, 2000)}
                        ></Button>
                        <Button
                            titleStyle={styles.titleStyle}
                            title="找回账号或密码"
                            type="clear"
                            onPress={throttle(() => {
                                console.log('找回密码');
                            }, 2000)}
                        ></Button>
                    </View>
                    <Divider style={styles.Divider}></Divider>
                    <Button
                        title="登录"
                        buttonStyle={styles.buttonStyle}
                        onPress={throttle(() => {
                            setPhone_right(checkPhone(user))
                            if (checkPhone(user)) {
                                setPassword_right(checkPassword(_password))
                                if (checkPassword(_password)) {
                                    if (check) {
                                        props.Login_func(user, _password)
                                        if (props.login.login && props.login.loading) {
                                            navigation.dispatch(resetAction)
                                        }
                                    }
                                    else tooltipRef.current.toggleTooltip()
                                }
                            }
                        }, 2000)}
                    ></Button>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', width: '100%', marginTop: pxPage(20), alignItems: 'center' }}>
                        <Tooltip
                            closeOnlyOnBackdropPress={check ? true : false}
                            popover={<Text style={{ color: globalColor.defaultBackgroundColor }}>仔细阅读并同意 </Text>}
                            ref={tooltipRef}
                            overlayColor="fff"
                            backgroundColor={globalColor.defaultFontColor_dis}
                        >
                            <View style={styles.view_input_view_two}>
                                <CheckBox
                                    title='我已阅读并同意'
                                    checkedColor={globalColor.defaultColor}
                                    checked={check}
                                    checkedIcon='dot-circle-o'
                                    uncheckedIcon='circle-o'
                                    onPress={throttle(() => {
                                        setCheck(!check)
                                    }, 2000)}
                                    containerStyle={{ backgroundColor: null, alignSelf: 'auto', borderWidth: 0, paddingEnd: 0, paddingStart: 0, paddingBottom: 0, paddingTop: 0, marginRight: 0 }}
                                    textStyle={styles.titleStyle}
                                    size={pxPage(12)}
                                ></CheckBox>
                                <Button
                                    buttonStyle={styles.buttonStyle_two}
                                    title="用户服务协议"
                                    titleStyle={styles.titleStyle_two}
                                ></Button>
                                <Text style={styles.titleStyle}>和</Text>
                                <Button
                                    buttonStyle={styles.buttonStyle_two}
                                    title="隐私政策"
                                    titleStyle={styles.titleStyle_two}
                                ></Button>
                            </View>
                        </Tooltip>
                    </View>
                    <Foot props={props} List={List} styles={styles} navigation={navigation} />
                </View>
            </View>
        </View>
    )
}

const mapStateToProps = state => ({
    nav: state.nav,
    login: state.login
})
const mapDispatchToProps = dispatch => ({
    Login_func: (user, password) => dispatch(Login_func(user, password)),
    Login_func_qq: () => dispatch(Login_func_qq())
});
export default connect(mapStateToProps, mapDispatchToProps)(Login)